<template>
  <!-- 登录弹窗页面 -->
  <div class="tologin">
      <div class="wechat_login" v-if="tologin">
        <div class="close" @click="closeLogin"></div>
        <p class="title">微信快速登录</p>
        <div class="code_box">
          <img
            src="../../../public/img/yuanzj/strategy_index/wechat_erweima.jpg"
          />
        </div>
        <div class="information clearfix">
          <div src="" class="sao"></div>
          <div class="text">
            <p>打开微信扫一扫</p>
            <p>快速登录婚礼纪</p>
          </div>
          <div class="computer_icon" @click="toggleLogin"></div>
        </div>
      </div>
      <div class="tel_login clearfix" v-else>
        <div class="close" @click="closeLogin"></div>
        <p class="title">验证码登录</p>
        <div class="form">
          <div class="err_tip" v-show="errMsg">
            <div class="phone_err">{{errMsg}}</div>
          </div>
          <input
            v-model="telephone"
            class="tel_number"
            type="text"
            placeholder="请输入手机号"
            maxlength="11"
          />
          <input
            v-model="pwd"
            class="pwd_number"
            type="password"
            placeholder="请输入密码"
            maxlength="16"
          />
          <div class="img_reg">
            <input
              v-model="imgcode"
              type="text"
              placeholder="请输入图片验证码"
            />
            <span v-html="svg_pic" @click="getImgcode" title="点击切换新验证码"></span>
          </div>
          <div class="tel_reg">
            <input
              v-model="msgcode"
              type="text"
              placeholder="请输入手机验证码"
            />
            <button
              :class="{ getcodechange: getmsg }"
              class="get_code"
              @click="getMsg"
            >
              获取验证码
            </button>
          </div>
          <button class="log_in" @click="Login">登录</button>
          <p class="aggrement">
            登录即表示同意<a href="javascript:;"
              >&lt;&lt;婚礼纪用户协议&gt;&gt;</a
            >
          </p>
        </div>
        <div class="code_icon" @click="toggleLogin"></div>
      </div>
    </div>

</template>


<script>
export default {
  data() {
    return {
      tologin: true,
      telephone: "",
      pwd:"",
      imgcode: "",
      msgcode: "",
      regex: "",
      getmsg: false,
      errMsg:"",
      svg_pic: "",
      svg_code: "",
    }
  },
  mounted(){
    // 加载请求图片验证码
    this.getImgcode();
  },
  methods: {
     // 封装请求验证码的函数
    getImgcode() {
      // 打开页面就自动请求验证码模块写入页面
      this.axios.get("/svg").then((result) => {
        // 请求得到的svg图片和验证码
        this.svg_pic = result.data.data;
        this.svg_code = result.data.text;
      });
    },
    // 点击关闭登录
    closeLogin() {
      this.$parent.changeloginbox()
    },
    // 点击登录
    Login() {
      // 验证手机号
      let reg = /^1[3-8]\d{9}$/;
      if (!reg.test(this.telephone)) {
        this.errMsg = "请输入正确手机号";
      } else {
          // 验证密码
          let reg=/^[0-9]{6}$/;
          if(!reg.test(this.pwd)){
            this.errMsg = "请输入正确密码";
          }else{
            if (this.imgcode!=this.svg_code) {
              this.errMsg = "图片验证码输入错误";
            } 
              // else {
              //   let reg = /\d{6}/;
              //   if (!reg.test(this.msgcode)) {
              //   this.errMsg = "短信验证码错误";
              //   } 
                  else {
                    this.errMsg = "";
                    this.axios.get("/user/login", {
                      params: {
                        phone: this.telephone,
                        upwd: this.pwd,
                      }
                      
                    })
                    .then(result=>{
                      if(result.data.code==200){
                        this.$store.commit("updateUserInfo", this.telephone, 1);
                        let ss = window.sessionStorage;
                        ss.phoneNumber = this.telephone;
                        ss.is_login = 1;
                        // 登陆成功时 
                        this.$parent.changeinputbox();            
                        // 关掉登录框
                        this.closeLogin();

                      }else{
                        // alert("服务器端错误，登录失败！")
                         alert("账户或密码错误，登录失败！")

                      }
                    })
                  }
              // }
          }
      }
    },
    // 点击获取短信验证码,未完成
    getMsg(e) {
      let reg = /^1[3-8]\d{9}$/;
      if (!reg.test(this.telephone)) {
        this.errMsg = "请输入正确手机号";
      } else {
        this.regex = "";
        let sec = 60;
        var timer = setInterval(() => {
          sec--;
          e.target.innerText = `${sec}秒`;
          this.getmsg = true;
          if (sec == 0) {
            clearTimeout(timer);
            e.target.innerText = "获取验证码";
            this.getmsg = false;
          }
        }, 1000);
      }
    },
    // 切换登录方式
    toggleLogin() {
      if (this.tologin) {
        this.tologin = false;
      } else {
        this.tologin = true;
      }
    }

  }

}
</script>

<style scoped>
a {
  text-decoration: none;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
a,
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
.tologin {
  background: rgba(0, 0, 0, 0.55);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 1000;
}
.tologin > div {
  width: 480px;
  height: 474px;
  background: #fff;
  border-radius: 2px;
  position: relative;
}

.tologin .close {
  position: absolute;
  background: url(http://qnm.hunliji.com/o_1cfrqc6fg1ke61n0dbf01b9m1e4nc.png)
    no-repeat;
  width: 12px;
  height: 12px;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.tologin .title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 10px;
  color: #000;
}
.wechat_login .code_box {
  width: 230px;
  margin: 0 auto;
}
.code_box img {
  width: 230px;
  margin-top: 35px;
  border: 1px solid #e2e2e2;
}
.code_box img:hover {
  opacity: 1;
}

.wechat_login .information {
  margin: 40px 20px 0 60px;
}
.information .sao {
  background: url(http://qnm.hunliji.com/o_1cfrsiefj405dvoe0p5nub1ah.png)
    no-repeat;
  width: 44px;
  height: 44px;
  float: left;
  margin: 5px 0;
}
.information .text {
  float: left;
  font-size: 16px;
  color: #333;
  margin-left: 24px;
}
.text p {
  margin: 5px 0;
}
.information .computer_icon {
  background: url(http://qnm.hunliji.com/o_1cfrsle28a591l7l1hrp1fiit7hm.png)
    no-repeat;
  width: 56px;
  height: 56px;
  float: right;
  cursor: pointer;
}

.tel_login .form {
  width: 360px;
  margin: 30px 60px 10px;
}
.form .err_tip {
  width: 358px;
  height: 24px;
  line-height: 26px;
  border: 1px solid #ffe1e4;
  background: #fff9fa;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  overflow: hidden;
}

.err_tip::before {
  content: "x";
  width: 12px;
  height: 12px;
  background: #ff5c5c;
  border-radius: 50%;
  color: #fff;
  float: left;
  margin: 6px 5px 0 5px;
  line-height: 11px;
  text-align: center;
}
.form input {
  border: 1px solid #d8d8d8;
  height: 36px;
  text-indent: 10px;
  border-radius: 2px;
  color: #333;
  outline: 0;
  width: 236px;
}
.form input.tel_number,
.form input.pwd_number {
  margin-bottom: 15px;
  width: 358px;
}
.form .img_reg {
  margin-bottom: 15px;
}
.img_reg span {
  width: 108px;
  height: 38px;
  border: 1px solid #d8d8d8;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 6px;
}
.form .tel_reg {
  margin-bottom: 15px;
}

.form button {
  background: #f83244;
  color: #fff;
  border: 0;
  height: 40px;
  line-height: 40px;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.tel_reg button.get_code {
  width: 110px;
  font-size: 14px;
  margin-left: 6px;
}
.tel_reg button.getcodechange {
  background: #aaa;
}
.form button.log_in {
  width: 200px;
  font-size: 16px;
}
.form .aggrement {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}
.aggrement a {
  color: #13acec;
}
.aggrement a:hover {
  text-decoration: underline;
}

.tel_login .code_icon {
  float: right;
  background: url(http://qnm.hunliji.com/o_1cfrkd34o14o31inj1jlucpe11lh7.png)
    no-repeat;
  width: 56px;
  height: 56px;
  margin-right: 20px;
  cursor: pointer;
}
.get_code:hover,
.log_in:hover {
  opacity: 0.85;
}
</style>
